<template>
  <a-layout style="min-height: 100vh; background: #fff">
    <a-layout-sider
      v-model:collapsed="collapsed"
      collapsible
      style="background: #f5f5f5; border-right: 5px solid #f5f5f5"
      theme="light"
    >
      <div class="logo" />
      <a-menu theme="light" v-model:selectedKeys="selectedKeys" mode="inline">
        <a-sub-menu key="sub1">
          <template #title>
            <span>
              <FireOutlined />
              <span>热门</span>
            </span>
          </template>
          <a-menu-item key="3">现在购买！</a-menu-item>
          <a-menu-item key="4">最新创意</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub2">
          <template #title>
            <span>
              <SearchOutlined />
              <span>分类筛选</span>
            </span>
          </template>
          <a-menu-item key="6">文化创意</a-menu-item>
          <a-menu-item key="7">人工智能</a-menu-item>
          <a-menu-item key="8">信息技术</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub3">
          <template #title>
            <span>
              <BarsOutlined />
              <span>排行榜</span>
            </span>
          </template>
          <a-menu-item key="9" @click="showDrawer1()">查看排行榜</a-menu-item>
        </a-sub-menu>
      </a-menu>
      <a-drawer
        title="排行榜"
        placement="right"
        :closable="false"
        v-model:visible="visible1"
      >
        <a-list size="small" item-layout="horizontal" :data-source="data">
          <template #renderItem="{ item }">
            <a-list-item>
              <a-list-item-meta>
                <template #title>
                  <a>{{ item.nickName }}</a>
                </template>
                <template #avatar>
                  <a-avatar size="small" :src="item.url" />
                </template>
              </a-list-item-meta>
            </a-list-item>
          </template>
        </a-list>
      </a-drawer>
    </a-layout-sider>
    <a-layout>
      <a-layout-content style="background: #fff">
        <a-row :gutter="[16, 8]">
          <a-col v-for="item in page" :key="item.picId" :span="24 / 4">
            <a-card hoverable style="width: 240px">
              <template #cover class="height:400px;width:240px">
                <a-image
                  class="img"
                  :width="240"
                  :height="400"
                  :alt="example"
                  :src="item.url"
                />
              </template>
              <a-card-meta :title="item.title" @click="showDrawer(item)">
                <template #description>
                  <a-typography-paragraph
                    :ellipsis="ellipsis"
                    :content="item.describe"
                  >
                  </a-typography-paragraph
                ></template>
              </a-card-meta>
              <a-drawer
                :title="param.title"
                placement="right"
                :closable="false"
                v-model:visible="visible"
                :after-visible-change="afterVisibleChange"
              >
              <p>{{item.describe}}</p>
              </a-drawer>
            </a-card>
          </a-col>
        </a-row>
      </a-layout-content>
      <a-layout-footer style="background: #fff; text-align: center">
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<script>
import {
  BarsOutlined,
  SearchOutlined,
  FireOutlined,
  PieChartOutlined,
  DesktopOutlined,
  UserOutlined,
  TeamOutlined,
  FileOutlined,
} from "@ant-design/icons-vue";
import { computed, defineComponent, ref } from "vue";
// 排行榜数据
const data = [
  {
    nickName: "张三",
    url: "https://s3.bmp.ovh/imgs/2021/11/565de161a0f265e6.jpeg",
  },
  {
    nickName: "李四",
    url: "https://s3.bmp.ovh/imgs/2021/11/1c719644b9822f22.png",
  },
  {
    nickName: "王五",
    url: "https://s3.bmp.ovh/imgs/2021/11/f89747df0c884c6d.jpeg",
  },
  {
    nickName: "赵六",
    url: "https://s3.bmp.ovh/imgs/2021/11/d90e863df6dd82f9.jpeg",
  },
];
export default defineComponent({
  components: {
    BarsOutlined,
    SearchOutlined,
    PieChartOutlined,
    DesktopOutlined,
    UserOutlined,
    TeamOutlined,
    FileOutlined,
    FireOutlined,
  },
  setup() {
    // 抽屉1
    const visible1 = ref(false);
    const showDrawer1 = () => {
      visible1.value = true;
    };
    // 抽屉2
    const visible = ref(false);
    const afterVisibleChange = (bool) => {
      console.log("visible", bool);
    };

    const showDrawer = (item) => {
      param.value.title = item.title;
      param.value.describe = item.describe;
      visible.value = true;
    };
    // 参数
    const param = ref({
      title: "",
      describe: "",
    });
    // 收回菜单
    const ellipsis = computed(() => {
      return {
        rows: 2,
        suffix: "",
      };
    });
    return {
      data,
      showDrawer1,
      visible1,
      visible,
      afterVisibleChange,
      showDrawer,
      param,
      ellipsis,
    };
  },

  data() {
    return {
      collapsed: ref(false),
      selectedKeys: ref(["1"]),
      page: ref([
        {
          picId: 1,
          title: "交点文创",
          describe:
            "交点文创工作室目前共推出四个系列六套共计二十余种文创产品，同时利用自购设备开展团体定制。四个系列分别为文化交大、创意交大、活力交大、科技交大四类，代表作品有交大木质套尺、交饰丨“星群”耳钉、自制DIY文化衫，以及西交“无印”系列帆布袋，文创产品品类涵盖木质、铁质、橡胶塑料、纺织品等材料以及平面印刷、热转印热升华、镂空雕刻、铸模铸造等技术。工作室同时购置热转印设备两套，用于建设面向学生的文创DIY空间，让更多的同学参与进文创工作，同时利用设备自主生产部分产品，开展部分团体定制业务。",
          url: "/src/assets/image/交点文创.jpg",
        },
        {
          picId: 2,
          title: "医疗服务机器人",
          describe:
            "公司的核心产品是一种先进的智能服务机器人。它的硬件部分包括头部的RGBD深度相机、麦克风阵列；机身的两自由度机械臂；底盘的音响和激光雷达。软件部分以ROS为构架，有视觉处理、语音识别、机械臂控制、导航巡航以及激光建图等功能方向。机器人拥有换药及病危预警功能，配套测体温、消毒、送餐、远程视频探访医护照看等任务，能在于隔离病房、ICU重症监护室等重点场所发挥关键作用。与市面上其他机器人相比，它自主性更强，对于动态环境的建模能力和适应能力更强，且可以有效地与人进行智能的交互与协作。该机器人项目已获中国机器人大赛(RoboCup)一等奖、高校智能机器人大赛一等奖等重大奖项",
          url: "/src/assets/image/医疗服务机器人.JPG",
        },
        {
          picId: 3,
          title: "农业机械狗",
          describe:
            "公司的核心产品是具有完全自主知识产权的“机器狗+”智能四足机器人，致力于在一定程度缓解农村劳动力短缺和结构不合理的问题，改变传统农业劳动方式、促进现代农业发展。针对当前市场中农用机器人只针对农业生产某一过程，使用效率低，智能化程度低等 ，公司推出集土地巡检、农作物分拣和运送一体化的智能四足机器人。在“机器狗+”基础下，产品具有图像识别能力、定位能力、复杂地形适应能力和控制能力。机器狗+农用土壤传感器+摄像头可实现土地巡检。四足机器人体积适中，四足的设计使其具有良好的机动性、协调性、灵活性、稳定性，能够适应农田间复杂的地形，自由穿梭。四足机器人通过摄像头连续拍照感应，可实现自主走固定路线（农户也能够通过遥控控制机器人），对土壤水分、温度、pH、氮磷钾含量进行检测，同时能够拍摄照片或者录制视频传输给农户。机器狗+视觉识别+机器臂可实现农产品分拣。机器人利用视觉识别扫描在传送带上快速移动的物体，通过颜色、形状、大小来区分农作物的种类，控制机器臂对农作物进行抓取和分拣。基于机器狗，机器人还能够对农作物进行厂房范围内的运送。",
          url: "/src/assets/image/农业机械狗.jpg",
        },
        {
          picId: 4,
          title: "预约系统",
          describe:
            "伴随社会经济的发展，国民人口的增加，公共服务量，商业服务量的快速增长，各大服务窗口的业务压力越来越大，无效预约造成的盲目排队等现象屡见不鲜。在快节奏的生活潮流下如何优化预约消除无效预约解决盲目排队已然成为困扰各种公共业务与服务机构与用户使用者的共同愿望。从排队产生，我们将被需求对象成为需求者，把提供服务，解决问题的一方称为服务机构，将服务机构为需求者提供的服务与产品称为服务窗口。需求者要求的随机性和服务可预约设施的有限性是产生排队现象的根本原因，排队论就是利用概率论和随机过程理论，研究随机服务系统内服务机构与顾客需求之间的关系，以便合理地设计和控制排队系统。",
          url: "/src/assets/image/预约系统.jpg",
        },
      ]),
    };
  },
});
</script>
<style>
.img {
  width: 100%;
  height: 100%;
  padding: 5px;
}
</style>